<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="22">
       <el-form-item label="二级机构" prop="departmentOrgId">
        <treeselect :default-expand-level="1"  v-model="form.departmentOrgId" :options="deptOptions" :show-count="true" placeholder="请选择机构" size="small" class="form_long"/>
       </el-form-item>
       </el-col>
    </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="项目指南编号" prop="projectGuideNumber">
            <el-input v-model="form.projectGuideNumber" placeholder="请输入项目指南编号" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申报类型" prop="declarationType">
            <el-select v-model="form.declarationType" placeholder="请选择申报类型" class="form_short">
              <el-option
                v-for="dict in declarationTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人工号" prop="projectOwnerId">
             <el-input v-model="form.projectOwnerId" placeholder="请输入工号" type="string" size="small" class="form_short" @blur="searchUser" @keyup.enter.native="searchUser"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人姓名">
            <el-input v-model="form.projectLeader" placeholder="请输入工号自动带入" disabled class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人职称" prop="ownerTitle">
            <el-input v-model="form.ownerTitle" placeholder="请输入职称" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人电话" prop="ownerPhone">
            <el-input v-model="form.ownerPhone" placeholder="请输入电话" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人邮箱" prop="ownerEmail">
            <el-input v-model="form.ownerEmail" placeholder="请输入邮箱" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="技术人员" prop="labTechnology">
            <el-select v-model="form.labTechnology" placeholder="请选择实验室技术人员" class="form_short">
              <el-option
                v-for="dict in laboratoryTechniciansOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="form.labTechnology" placeholder="请输入实验室技术人员" class="form_short"/> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="课题关键词" prop="subjectKeywords">
            <el-input v-model="form.subjectKeywords" placeholder="请输入课题关键词" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>

      <hr>
        <div class="form_title">
          <p>其他成员</p>
        </div>
      <div class="form_table">
          <el-table :data="form.labProjectWorkResearchPersonnels" style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column label="工号" min-width="60">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" placeholder="请输入工号" size="mini" 
                @change="changeNmuber($event,scope.$index)" ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="输入工号自动填写" size="mini" disabled ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="职称"  min-width="50">
              <template slot-scope="scope">
                 <el-input  v-model="scope.row.ownerTitle" placeholder="请输入职称" size="mini"  ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="邮箱" min-width="100">
              <template slot-scope="scope">
                  <el-input  v-model="scope.row.ownerEmail"  placeholder="输入工号自动填写" size="mini"  >
                  </el-input>
              </template>
            </el-table-column>
            <el-table-column label="联系电话">
              <template slot-scope="scope">
                  <el-input  v-model="scope.row.contactPhone" placeholder="联系电话" size="mini" ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" min-width="30">
              <template slot-scope="scope">
                <el-button size="mini" type="text"  icon="el-icon-delete"
                @click="delLabProjectWorkResearchPersonnels(scope.$index)" style="margin-top: 0px">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="table_button" size="mini"   @click="addLabProjectWorkResearchPersonnels">新增成员</el-button>
        </div>
        <hr>


    </el-form>
  </div>
</template>
<script>
import {getByNo} from "@/api/labbase/instrumentation"
import {searchEmployee,getEmployeeInfo} from "@/api/labdata/employee";
import {treeselect } from "@/api/labdata/orgnization";
import Treeselect from "@riophae/vue-treeselect";


  export default {
    name: "ProjectWorkResearch",
    components:{Treeselect},
    data() {
      return {
        //申报类型
        declarationTypeOptions: [],
        //实验技术人员
        laboratoryTechniciansOptions: [],
          // 部门树选项
        deptOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectOwnerId: [
          { required: true, message: "工(学)号不能为空", trigger: "blur" }
        ],
        contactPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        ownerEmail: [
         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        subjectKeywords: [
        { required: true, message: "课题关键词不能为空", trigger: "blur" }
        ],
        ownerPhone: [
         {  message: '请输入电话', trigger: 'blur' },
         {
           pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: '请输入正确的手机号码或者座机号',
          }
        ],

        }
      };
    },
    props:{
      workResearch:Object,
    },
    created() {
      this.getTreeselect();
      this.getDicts("declaration_type").then(response => {
      this.declarationTypeOptions = response.data;
    });
      this.getDicts("laboratory_technicians").then(response => {
      this.laboratoryTechniciansOptions = response.data;
    });
      if(this.workResearch){
        this.form = this.workResearch;
        this.searchUser();
      }else{
        this.form  = {
          labProjectWorkResearchPersonnels:[]
        };
      }
    },
    methods: {
      getWorkResearch(){
        return this.form;
      },

      // 输入工号搜索
      searchUser(){
        if(!this.form.projectOwnerId){
          this.form.projectLeader = null;
          this.form.ownerTitle = null;
          return;
        }
         searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

       //新增参与人员清单
       addLabProjectWorkResearchPersonnels() {
        let obj = {};
        obj.number = "";
        obj.name = "";
        obj.ownerTitle = "";
        obj.ownerEmail = "";
        obj.contactPhone = "";
        this.form.labProjectWorkResearchPersonnels.push(obj);
      },
      //删除当前行费用清单
      delLabProjectWorkResearchPersonnels(index) {
        this.form.labProjectWorkResearchPersonnels.splice(index, 1);
      },

      // 工号改变调用
      changeNmuber(event, index) {
        searchEmployee(event).then(response => {
          //console.log(response)
          this.form.labProjectWorkResearchPersonnels[index].name = response.data.nickName;
          this.form.labProjectWorkResearchPersonnels[index].ownerTitle = response.data.title
          this.form.labProjectWorkResearchPersonnels[index].ownerEmail = response.data.email;
          this.form.labProjectWorkResearchPersonnels[index].contactPhone = response.data.phonenumber
        });
      },

      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

    }

  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .table_button {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
</style>
